
export function tabsjs() {
    // 1. 获取到所有的 li和 main
    const lis = document.getElementsByClassName('tab') as HTMLCollectionOf<Element>
    const mains = document.getElementsByClassName('main')

    // 2. 循环 li集合，绑定单击事件
    // 排它思想，先清除所有li的active类名
    // 给当前li加类名，改变字体颜色
    // 派他思想，先清除所有main的selected类名
    // 让对应的main加类名： display:block
    for (let i = 0; i < lis.length; i++) {
        let lisarr = lis[i] as HTMLElement
        lisarr.onclick = function () {
            for (var j = 0; j < lis.length; j++) {
                lis[j].classList.remove('active')
            }
            lis[i].classList.add('active')

            for (var k = 0; k < mains.length; k++) {
                mains[k].classList.remove('selected')
            }
            mains[i].classList.add("selected")
        }
    }
}
